<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Button</title>
<style>
#imgbutton1 {
  background-image: url('picture/单人游戏.png'); /* 图片URL */
  background-size: cover;
  border: none;
  color: transparent;
  cursor: pointer;
  position: absolute;
  top: 400px;
  left: 400px;
  height: 50px; /* 根据图片大小调整 */
  width: 170px; /* 根据图片大小调整 */

}
#imgbutton2 {
  background-image: url('picture/双人游戏.png'); /* 图片URL */
  background-size: cover;
  border: none;
  color: transparent;
  cursor: pointer;
  position: absolute;
  top: 500px;
  left: 390px;
  height: 50px; /* 根据图片大小调整 */
  width: 190px; /* 根据图片大小调整 */

}
</style>
</head>
<script>
    class img_bt{
    left=400
    top=400
    width=170
    height=50
    id_name=null
    constructor(id_name,left,top){
        this.id_name=id_name
        console.log(id_name)

        
    }
    get_bigger()
{ 
    let xt = document.getElementById(this.id_name);
    xt.style.width=this.width+30+"px"
    xt.style.left=this.left-10+"px"
    
}
get_smaller()
{ 
    let xt = document.getElementById(this.id_name);
    xt.style.width=this.width+"px"
    xt.style.left=this.left+"px"
}

}

var bt1=new img_bt("imgbutton1",400,400);  //这个是进入页面里的
var bt2=new img_bt("imgbutton2",400,500);  //这个是
    
   </script>
<body>
    


       <a href="try1.html" target="_blank">
        <button id="imgbutton1" onmouseover="bt1.get_bigger()" onmouseleave="bt1.get_smaller()"></button>
        </a >

        <a href="双人对战.html" target="_blank">
<button id="imgbutton2" onmouseover="bt2.get_bigger()" onmouseleave="bt2.get_smaller()"></button>
</a >
<img id="background" src="picture/背景图2.png" width="1000" height="700">  
</body>
</html>